<template>
  <div class="bg-white">
    <el-page-header @back="back">
      <template slot="title">
        <span class="back">返回12121</span>
      </template>
      <template slot="content">
        <span class="back pr-4">{{ current.name }}</span>
        <!-- <el-button type="primary" style="float:right" @click="showHistory=true">申请历史</el-button> -->
      </template>
    </el-page-header>
    <approve-form class="pa-10" :detail="false" :current="current" @back="back" />
  </div>
</template>

<script>
import moment from 'moment'
import { mapGetters } from 'vuex'
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
import { requestTargetDetail, getApproveDetail } from '@/api/chart/chart'
import ApproveForm from './components/approve-form.vue'

export default {
  name: 'ChartView',
  components: { ApproveForm },
  data() {
    return {
      title: '',
      current: {},
      showHistory: false,
    }
  },
  computed: {
    ...mapGetters(['name']),
  },
  created() {
    this.init()
  },
  methods: {
    back() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$router.back()
      })
    },
    async init() {
      if (this.$route.params.id) {
        const result = await getApproveDetail({ id: this.$route.params.id })
        let { approveUserName, deptName, reason, approveStatus } = result.data
        if (result.success) {
          const res = await requestTargetDetail({ id: result.data.matrixId })
          if (res.success) {
            this.current = {
              ...res.data,
              director: Number(res.data.director),
              position: Number(res.data.position),
              panelStyle: JSON.stringify(DEFAULT_COMMON_CANVAS_STYLE_STRING),
              reviser: this.name,
              createdAt: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
              approveUserName,
              deptName,
              reason,
              approveStatus,
            }
          } else {
            this.$message.error(res.message)
          }
        } else {
          this.$message.error(result.message)
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep .el-page-header {
  background-color: #ffff;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .el-page-header__content {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #262626;
}
.bg-white {
  min-height: 100%;
}
.back {
  line-height: 32px;
}

::v-deep .el-page-header__left {
  flex-shrink: 0;
}

::v-deep .el-page-header__content {
  width: 100%;
}
</style>
